import React, { FC, memo } from 'react';
import { WingBlank, WhiteSpace } from 'antd-mobile';
import Header from './components/Header';
import Search from './components/Search';
import Hot from './components/Hot';
import { fetchCitys, fetchHouses } from '@/api/home';

import './index.less';

const Home: FC = () => {
  const [citys, citysLoading = false] = fetchCitys();
  const [houses] = fetchHouses();

  const cityList = Array.isArray(citys) ? citys : null;
  return (
    <div className="home-wrap">
      <WhiteSpace />
      <WingBlank size="md">
        <Header />
        {cityList && <Search citys={cityList} citysLoading={citysLoading} />}
        <Hot houses={houses} />
      </WingBlank>
      <WhiteSpace />
    </div>
  );
};

export default memo(Home);
